<template>
    <el-card>
        <el-table border :data="menuList" row-key="id">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="权限值" prop="code"></el-table-column>
            <el-table-column
                label="修改时间"
                prop="updateTime"
            ></el-table-column>
            <el-table-column label="操作">
                <template #="{ row }">
                    <el-button
                        @click="addMenu(row)"
                        type="primary"
                        size="small"
                        :disabled="row.level == 4 ? true : false"
                    >
                        {{ row.level == 3 ? '添加功能' : '添加菜单' }}
                    </el-button>
                    <el-button
                        type="primary"
                        @click="editMenu(row)"
                        size="small"
                        :disabled="row.level == 1 ? true : false"
                    >
                        编辑
                    </el-button>

                    <el-popconfirm
                        title="Are you sure to delete this?"
                        @confirm="deleteMenu(row)"
                    >
                        <template #reference>
                            <el-button
                                type="primary"
                                size="small"
                                :disabled="row.level == 1 ? true : false"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!--  -->
    <el-dialog
        :title="menuParams.pid ? '添加菜单' : '编辑菜单'"
        v-model="dialogTableVisible"
        width="30%"
    >
        <el-form label-width="70">
            <el-form-item label="名称">
                <el-input
                    placeholder="权限管理"
                    style="width: 200px"
                    v-model="menuParams.name"
                ></el-input>
            </el-form-item>
            <el-form-item label="权限值">
                <el-input
                    style="width: 200px"
                    placeholder="请输入权限值"
                    v-model="menuParams.code"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmAdd">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import {
    reqGetAllMenu,
    reqAddOrUpdateMenu,
    reqDeleteMenu,
} from '@/api/acl/menu';
import type {
    MenuResponse,
    MenuData,
    MenuParams,
    MenuList,
} from '@/api/acl/menu/type';
import { ElMessage } from 'element-plus';

const dialogTableVisible = ref(false);
const menuParams: MenuParams = reactive({
    code: '',
    name: '',
    level: 0,
    pid: '',
});
const menuList = ref<MenuList>([]);
onMounted(() => {
    getMenuList();
});
const getMenuList = async () => {
    const res: MenuResponse = await reqGetAllMenu();
    if (res.code === 200) {
        menuList.value = res.data;
    }
};
// 添加菜单
const addMenu = (row: MenuData) => {
    dialogTableVisible.value = true;
    menuParams.level = row.level + 1;
    menuParams.pid = row.id;
};
const init = () => {
    menuParams.level = 0;
    menuParams.pid = '';
    menuParams.code = '';
    menuParams.name = '';
};
const cancel = () => {
    dialogTableVisible.value = false;
    init();
};
// 编辑菜单
const editMenu = (row: MenuData) => {
    dialogTableVisible.value = true;
    console.log('row', row);
    Object.assign(menuParams, row);
};
// 删除菜单
const deleteMenu = async (row: MenuData) => {
    const res = await reqDeleteMenu(row.id);
    if (res.code === 200) {
        ElMessage.success('删除成功');
        getMenuList();
    } else {
        ElMessage.error('删除失败');
    }
};
// 确定添加
const confirmAdd = async () => {
    const res = await reqAddOrUpdateMenu(menuParams);
    if (res.code === 200) {
        dialogTableVisible.value = false;
        ElMessage.success('成功');
        getMenuList();
        init();
    }
};
</script>

<style scoped></style>
